<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>♥</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 外边距 自适应居中 */
				margin: 100px auto;
				/* 转换属性 旋转 */
				transform: rotate(135deg);
				/* 透明度：属性值范围值0~1 */
				opacity: .7;
				/* 滤镜属性：下阴影 产生光晕效果 
				       drop-shadow(X轴 Y轴 模糊范围 模糊颜色)
				*/
				filter: drop-shadow(0 0 10px #e4393c);
				/* 动画 复合属性 2.启动动画 */
				animation: heart .8s linear infinite;
				/*         关键帧名称 过渡时间 动画次数 */
				
			}
			/* 
			 *  CSS3基础语法：选择器：抓取页面上元素添加效果
			 *  ③伪类选择器：给元素添加附加效果
			 *  语法：选择器:hover  当鼠标悬停时给元素添加效果
			 *       选择器:before  在元素之前生成内容，通常与content属性使用
			 *       选择器:after   在元素之后生成内容，通常与content属性使用
			 */
			/* 需求：心【四方块】上方生成内容 */
			div:before{
				content: "";
				/* CSS属性：显示属性
				display: block;转换成块元素
				display: inline;转换成行元素
				display: none;元素消失
				*/
				display: block;
				/* 画圆：1.空间2.边框/背景填充3.倒角 */
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				/* 相对定位 */
				position: relative;
				left: -100px;
			}
			div:after{
				content: "";
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				top: -100px;
			}
			/* 动画：1.创建关键帧 2.找到添加动画元素，启动关键帧 */
			@keyframes heart{
				0%{/* 等比例 */
				   /* 转换属性[复合属性]：旋转 缩放 平移*/
				transform: rotate(135deg) scale(1);
				}
				30%{/* 缩小 */
					transform: rotate(135deg) scale(.8);
				}
				100%{/* 缩放 */
					transform: rotate(135deg) scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<!-- 心 思路：设置1个div 产生两个圆：伪类选择器
		     html     元素分类：所有元素明确种类
			          块元素：可以设置高宽、独占一行，典型 div
					  行元素：不可以设置高宽、在一行内显示，典型 span
					  *文字就是行元素
					  行内块元素：可以设置高宽、在一行内显示，典型 img
		 -->
		<div></div>
		<audio src="renxi.mp3" autoplay></audio>
	</body>
</html>